<template>
  <el-container class="layout-container-demo" style="height: 500px">
    <Bar></Bar>
    <el-container>
      <el-table :data="tableData">
        <el-table-column prop="name" label="Name" width="140" />
        <el-table-column prop="age" label="Age" width="120" />
        <el-table-column prop="email" label="Email" />
      </el-table>
    </el-container>
  </el-container>

</template>

<script>
import Bar from "../components/Bar.vue";

export default {
  name: 'OptionOne',
  components: { Bar },
  data() {
    return {
      msg: 'Loading...', // 初始消息
      tableData: [] // 初始化tableData为空数组
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      this.$http.get('/')
        .then(response => {
          console.log(response.data);
          this.tableData = response.data;

          // 假设response.data包含一个msg属性
          if (response.data.length > 0 && response.data[0].msg) {
            this.msg = response.data[0].msg; // 更新消息内容
          } else {
            this.msg = 'No message available'; // 如果没有msg属性
          }
        })
        .catch(error => {
          console.log(error);
          this.msg = 'Error loading data'; // 加载数据出错时的消息
        });
    }
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>
